<template>
    <div class="song-detail">
        <div class="top-page">
            <img :src="playlist.coverImgUrl" class="bgimg" />
            <div class="top-detail">
                <div class="nav">
                    <div class="left">
                        <SvgIcon class="icon" iconName="zuojiantou" @click="$router.go(-1)" />
                        <span>歌单</span>
                    </div>
                    <div class="right">
                        <SvgIcon class="icon, search" iconName="sousuo1-copy" />
                        <SvgIcon class="icon" iconName="hanbaocaidan1" />
                    </div>
                </div>
                <div class="content">
                    <img :src="playlist.coverImgUrl"/>
                    <div class="detail">
                        <span class="title">{{ playlist.description }}</span>
                        <div class="author">
                            <img :src="creator.avatarUrl" />
                            <span class="author-name">{{ creator.nickname }} ></span>
                        </div>
                        <div class="des">{{ creator.signature ? creator.signature : '这里什么也没有~' }}</div>
                    </div>
                </div>
                <div class="icons-list">
                    <div class="icon-item">
                        <SvgIcon class="icon" iconName="pinglun" />
                        <span>{{ playlist.commentCount }}</span>
                    </div>
                    <div class="icon-item">
                        <SvgIcon class="icon" iconName="fenxiang" />
                        <span>{{ playlist.shareCount }}</span>
                    </div>
                    <div class="icon-item">
                        <SvgIcon class="icon" iconName="xiazai" />
                        <span>下载</span>
                    </div>
                    <div class="icon-item">
                        <SvgIcon class="icon" iconName="duoxuan-xuanzhong" />
                        <span>评论</span>
                    </div>
                </div>
            </div>
        </div>
        <songList :message="playlist"/>
        <FooterItem />
    </div>
</template>

<script setup>
import FooterItem from '@/views/songDetail/components/FooterItem.vue'
import { useRoute } from 'vue-router'
import { getSongList } from '@/api/song'
import { ref } from 'vue'
import songList from './components/songList.vue'

const playlist = ref({})
const creator = ref({})

// onMounted(() => {
//   getSongsList()
// })

// 获取歌曲列表
const getSongsList = async () => {
  try {
    const { query: { id } } = useRoute()
    // console.log(id)
    const { data } = await getSongList(id)
    playlist.value = data.playlist
    creator.value = data.playlist.creator
    // 本地存储，防止刷新页面后丢失
    sessionStorage.setItem('playlist', JSON.stringify(data.playlist))
    if (creator.value === '') {
      creator.value = JSON.parse(sessionStorage.getItem('playlist')).creator
    }
    console.log(playlist.value)
  } catch (error) {
    console.log(error)
  }
}

getSongsList()

</script>

<style lang="scss" scoped>
.song-detail {
    position: relative;
}
.bgimg {
    position: fixed;
    z-index: -1;
    filter: blur(.6rem);
    width: 100%;
    height: 6rem;
}
.top-detail {
    padding: .3rem;
    // background-color: pink;
    :deep(.icon) {
        width: .5rem;
        height: .5rem;
    }
}
.nav {
    display: flex;
    justify-content: space-between;
    .left, .right {
        display: flex;
        align-items: center;
    }
    .left {
        span {
            padding-left: .6rem;
            color: white;
            font-size: .36rem;
        }
    }
    .search {
        margin-right: .5rem;
        :deep(.icon) {
            margin-top: .12rem;
        }
    }
}
.content {
    display: flex;
    margin-top: .4rem;
    img {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: .4rem;
    }
    .detail {
        margin-left: .4rem;
        text-overflow: ellipsis;
        overflow: hidden;
        color: white;
        .author {
            display: flex;
            align-items: center;
            margin-top: .24rem;
        }
        img {
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
        }
        .author-name {
            color: #92938f;
            padding-left: .16rem;
            font-size: .32rem;
        }
        .des {
            margin-top: .16rem;
            color: #989695;
            font-size: .24rem;
        }
    }
    .title {
        white-space: nowrap;
    }
}
.icons-list {
    display: flex;
    justify-content: space-between;
    margin: .4rem .4rem 0 .4rem;
    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
            margin-top: .16rem;
            color: #cac8cb;
            font-size: .32rem;
        }
    }
}

</style>
